<template>
  <view class="container">
    <custom-nav :isPopup="false"></custom-nav>
    <view class="content">
      <view v-for="(item, index) in regionList" :key="index">
        <view class="r-item">
          <view style="display: flex; align-items: center">
            <view :style="index == 0 ? 'opacity: 0.5' : ''">
              <uni-icons
                :type="item ? 'minus-filled' : 'plus'"
                size="38"
                :color="item ? '#F65952' : '#eee'"
                class="r-icon"
                @click="item ? removeItem(index) : addItem(index)"
              ></uni-icons>
            </view>
            {{ item || "添加地区" }}
          </view>
          <view class="r-text" v-if="index == 0">现居地</view>
        </view>
      </view>
    </view>

    <custom-popup>
      <view class="popup-con">
        <template v-if="popupType == 'serve'">
          <serve-card></serve-card>
        </template>

        <template v-else>
          <view class="popup-title"
            >对<text :class="genderInfo?.class">{{ genderInfo?.gender }}</text
            >地区要求</view
          >
          <view class="popup-text">{{ completeForm.region }}</view>
          <picker-region :formData="completeForm"></picker-region>
          <view class="s-btn" @click="submitFn"
            ><custom-btn>完成</custom-btn></view
          >
        </template>
      </view>
    </custom-popup>
  </view>
</template>

<script setup>
import PickerRegion from "@/components/picker/picker-region.vue";
import { setItem, getItem } from "@/utils/storage";
import { editUserDetail } from "@/api/my";

import useStore from "@/store";
const { app, common } = useStore();

const popupType = ref("");
const regionList = ref(["成都", "", "地区"]);
const userGender = ref("");
const curIndex = ref(0);
const genderInfo = computed(() => {
  const sexs = {
    男: {
      gender: "女方",
      class: "girl-text",
    },
    女: {
      gender: "男方",
      class: "boy-text",
    },
  };

  return sexs[userGender.value];
});

const completeForm = reactive({
  region: "",
});

const addItem = (index) => {
  curIndex.value = index;
  popupType.value = "";
  common.updatePopupOpen(true, "complete");
};

const submitFn = () => {
  const index = regionList.value.findIndex((v) =>
    v.includes(completeForm.region)
  );
  if (index != -1) {
    uni.showToast({
      title: "已存在相同地区，不可重复选择",
      icon: "none",
    });
    return;
  }

  regionList.value[curIndex.value] = completeForm.region;
  saveData();
};

const removeItem = (i) => {
  // 第一项不可自主删除 - 需联系客服
  if (i < 1) {
    popupType.value = "serve";
    const data = {
      title: "如需修改现居地",
    };
    common.updateServeParams(data);
    common.updatePopupOpen(true, "serve");
  } else {
    removeOther(i);
  }
};

const removeOther = (i) => {
  uni.showModal({
    content: "将为您删除当前择偶地区",
    cancelText: "再想想",
    confirmText: "删除",
    confirmColor: "#576B95",
    success: (res) => {
      if (res.confirm) {
        regionList.value.splice(i, 1, "");
        saveData();
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
};

// 保存数据
const saveData = () => {
  const info = getItem("editUser") || {};
  const address = regionList.value.filter((v) => v);
  info.mate_address = address.map((v) => {
    const item = v.split(",");
    return {
      province: item[0],
      city: item[1],
    };
  });
  setItem("editUser", info);
  const params = {
    user_info: JSON.stringify({ mate_address: info.mate_address }),
  };

  editUserDetail(params)
    .then((res) => {
      common.updatePopupOpen(false, "complete");
    })
    .catch((err) => {
      uni.showToast({
        title: "err",
        icon: "none",
      });
    });
};

const getInfo = () => {
  const { mate_address, gender } = getItem("editUser") || {};
  userGender.value = gender;
  const list = [];
  if (mate_address) {
    for (let i = 0; i < 3; i++) {
      if (mate_address[i]) {
        list.push(mate_address[i].province + "," + mate_address[i].city);
      } else {
        list.push("");
      }
    }
    regionList.value = list;
  }
};

onUnload(() => {
  common.updateServeParams();
});

onLoad((options) => {
  getInfo();
});
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";

.r-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20rpx;
  height: 120rpx;
  padding: 0 30rpx;
  background: #fff;
  border-radius: 20rpx;
  font-weight: 500;
  font-size: 36rpx;
  color: #333333;
  .r-icon {
    margin-right: 10rpx;
  }

  .r-text {
    font-weight: 400;
    font-size: 28rpx;
    color: #999999;
    justify-self: flex-end;
  }
}
.popup-con {
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  padding: 60rpx 70rpx;
  text-align: center;
  .popup-title {
    font-size: 48rpx;
    color: #000;
    font-weight: 800;
    padding-bottom: 20rpx;
  }
  .popup-text {
    font-weight: bold;
    font-size: 32rpx;
    color: #f65952;
  }
}

.s-btn {
  width: 490rpx;
  height: 120rpx;
  line-height: 120rpx;
  background: #f65952;
  border-radius: 120rpx;
  font-weight: 800;
  font-size: 36rpx;
  color: #fff;
  margin: 60rpx auto;
}
</style>
